<template>
	<view>
		<!-- 订单状态信息 -->
		<view class="order-status">
			<view class="status-item">
				<text>订单状态: </text>
				<text>{{ detail.orderStatusString }}</text>
			</view>
			<view class="status-item">
				<text>订单编号: </text>
				<text>{{ detail.orderNo }}</text>
			</view>
			<view class="status-item">
				<text>下单时间: </text>
				<text>{{ detail.createTime }}</text>
			</view>
			<!-- 已发货  状态码为 3-->
			<van-button v-if="detail.orderStatus === 3" color="#1baeae" block @click="handleConfirmOrder">确认收货</van-button>
			<!-- 未支付  状态码为 0-->
			<van-button v-if="detail.orderStatus === 0" color="#1baeae" block @click="showPayFn">去支付</van-button>
			<!-- 非取消  非完成 -->
			<!-- 什么时候不显示  状态码为 4 -->
			<van-button v-if="detail.orderStatus >= 0 && detail.orderStatus !== 4" block @click="handleCancelOrder">取消订单</van-button>
		</view>
		
		<!-- 订单金额 -->
		<view class="order-price">
		    <view class="price-item">
		        <text>商品金额: </text>
		        <text>￥ {{ detail.totalPrice }}</text>
		    </view>
		    <view class="price-item">
		        <text>配送方式: </text>
		        <text>顺丰快递</text>
		    </view>
		</view>
		
		<!-- 订单商品 -->
		<view class="order-goods">
		    <van-card
		      v-for="item in detail.newBeeMallOrderItemVOS"
		      :key="item.goodsId"
		      :num="item.goodsCount"
		      :price="item.sellingPrice"
		      desc="全场包邮"
		      :title="item.goodsName"
		      :thumb="item.goodsCoverImg"
		    />
		</view>
		
		<!-- 支付弹窗 -->
		<van-popup :show="state.isShow" position="bottom" custom-style="height: 30%;" closeable @close="hidePayFn">
			<view class="pay-view">
				<van-button color="#4fc08d" block @click="handlePayOrder(1)">微信支付</van-button>
				<van-button color="#1989fa" block @click="handlePayOrder(2)">其他支付</van-button>
			</view>
		</van-popup>
	</view>
</template>

<script setup>
// vue3小程序生命周期函数
import { onShareAppMessage, onLoad, onShow, onHide } from '@dcloudio/uni-app';
import { reactive, toRefs } from "vue";
import { getOrderDetail, cancelOrder, confirmOrder, payOrder } from '../../api/modules/order';

const state = reactive({ detail: {}, orderNo: '', isShow: false })

// 初始化数据
const init = async () => {
	uni.showLoading({
		title: '加载中...',
		mask: true
	})
	const { data } = await getOrderDetail(state.orderNo)
	state.detail = data
	console.log(data);
}

// * 确认收货（完成订单）
const handleConfirmOrder = () => {
    uni.showModal({
    	title: '提示',
    	content: '是否确认收货?',
    	success: async ({ confirm }) => {
    		if (!confirm) return
    		await confirmOrder(state.orderNo)
    		uni.$Toast('确认成功')
			uni.$emit('refresh')
    		init()
    	}
    })
}

// * 取消订单
const handleCancelOrder = () => {
	uni.showModal({
		title: '提示',
		content: '确认取消订单?',
		success: async ({ confirm }) => {
			if (!confirm) return
			await cancelOrder(state.orderNo)
			uni.$Toast('取消成功')
			uni.$emit('refresh')
			init()
		}
	})
}

// 显示支付弹窗
const showPayFn = () => {
	state.isShow = true
}

// 关闭支付弹窗
const hidePayFn = () => {
	state.isShow = false
}

// 支付订单
const handlePayOrder = async (type) => {
	uni.showLoading({ mask: true })
	await payOrder({ orderNo: state.orderNo, payType: type })
	uni.$Toast('支付成功')
	uni.$emit('refresh')
	state.isShow = false
	uni.hideLoading()
	init()
}

// 页面加载
onLoad((message) => {
	const { orderNo }  = message
	state.orderNo = orderNo
	init()
})

// 页面显示
onShow(() => {
	
})

// 页面隐藏
onHide(() => {
	
})

// 页面分享(不定义该函数 页面将无法分享)
onShareAppMessage(() => {
	
})

const { detail } = toRefs(state)
</script>

<style lang="scss">
page {
	background: #f7f7f7;
}
.order-status {
	background-color: #FFF;
	padding: 40rpx;
	font-size: 30rpx;
	border-top: 2rpx solid #ebedf0;
	.status-item {
		margin-bottom: 20rpx;
		text:first-child {
			color: #999;
		}
	}
	.van-button {
		margin-bottom: 20rpx;
	}
}

.order-price {
	background-color: #fff;
	margin: 40rpx 0;
	padding: 40rpx;
	font-size: 30rpx;
	.price-item {
		margin-bottom: 20rpx;
		text:first-child {
			color: #999;
		}
	}
}

.order-goods {
	.van-card {
		background-color: #fff;
		margin-top: 0;
		.van-card__price {
			color: #323233;
			font-weight: 500;
		}
	}
}

.pay-view {
	width: 90%;
	margin: 0 auto;
	padding-top: 100rpx;
	.van-button {
		margin-bottom: 20rpx;
	}
}
</style>
